<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="description" content="">
  <title></title>
  <script src="https://static.jmlk.co/scripts/dist/jmlink.min.js"></script>
  <link rel="stylesheet" href="https://oss.goddessxzns.com/active/year_report/2023/lib/animate.min.css">
  <link rel="stylesheet" href="https://oss.goddessxzns.com/active/year_report/2023/lib/swiper-bundle.min.css">
  <link rel="stylesheet" href="__STATIC__/activeyearreport/css/2023.css?v=10">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/music-0.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/1.jpg">
  {if !empty($userinfo)}
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/check-1.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/2.jpg">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/clear2023-1.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/clear2023-2.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/clear2023-3.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/clear-btn-bad.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/3.jpg">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/keyword-btn-1.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/keyword-btn-2.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/keyword-btn-3.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/keyword-btn-4.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/keyword-0.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/keyword-tip.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/keyword-1.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/keyword-2.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/keyword-3.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/keyword-4.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/p5-img-1.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/p5-img-2.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/p6-img-1.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/p7-img-1.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/8.jpg">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/p8-btn.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/9.jpg">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/p9-btn.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/10.jpg">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/p10-img-1.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/p10-img-2.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/p10-img-3.png">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2023/img/p10-img-3.gif">
  <link rel="prefetch" href="https://oss.goddessxzns.com/active/year_report/2022/img/next.png">
  {/if}
</head>
<body>
<div class="swiper-container">
  <div class="nav" style="top: {$height}px;">
    <div class="nav-box">
      {if !empty($userinfo)}
      <div class="to-back" onclick="commonJsToNative('local', 'back');"></div>
      <div class="share-box-btn" id="share_btn"></div>
      {/if}
      <div class="music-box">
        <audio id="bg-music" src="https://oss.goddessxzns.com/active/year_report/2023/img/music.mp3" loop="loop"
               autoplay="autoplay"></audio>
      </div>
    </div>
  </div>
  <div class="content-box swiper-wrapper">
    <div class="con-background swiper-slide p1 swiper-no-swiping">
      <div class="content-item">
        <div class="list">
          <div class="list-show">
            {foreach $tip_list as $v}
            <div class="list-item">
              <div class="text">{$v}</div>
            </div>
            {/foreach}
          </div>
        </div>
        {if !empty($userinfo)}
        <div class="xieyi-tip">
          <div class="checkbox-xieyi" data-status="0"></div>
          <div class="xieyi-tip-item">需要获取您的个人档案信息，方可查看完整的报告内容/同意准了app使用我的个人档案信息，生成新年启示录。</div>
        </div>
        <img class="btn open-year-report-btn" data-status="0" id="btn1"
             src="https://oss.goddessxzns.com/active/year_report/2023/img/open-btn-0.png"/>
        <div class="data-tip">数据截止2023年12月初</div>
        <div class="toast"></div>
        {else}
        <img class="btn open-year-report-btn" id="download"
             src="https://oss.goddessxzns.com/active/year_report/2023/img/download.png"/>
        {/if}
      </div>
    </div>
    {if !empty($userinfo)}
    <div class="con-background swiper-slide p2 swiper-no-swiping">
      <div class="content-item" style="display: block;">
        <div class="clear-img">
          <div class="img2"></div>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s">
          嗨，亲爱的<span class="bold">{$userinfo.name}</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
          今天是我们相遇的第{if $userinfo.reg_year}<span class="bold">{$userinfo.reg_year}</span>年{/if}<span class="bold">{$userinfo.reg_day}</span>天
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.7s">
          转眼间已经一起走过了又一年
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.9s">
          让我们告别2023，携手迈进<span class="bold">2024</span>年吧！
        </div>
        <div id="btn2" class="btn ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1.9s"></div>
      </div>
      <div class="loading" style="display: none;">
        <div class="progress">
          <span class="flag"></span>
          <div class="percent"></div>
        </div>
        <div class="text">清理完成，正在生成你的2024年度关键词…</div>
      </div>
    </div>
    <div class="con-background swiper-slide p3 swiper-no-swiping">
      <div class="content-item">
        <p class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s">
          <span class="text1">今年</span>
        </p>
        {if !empty($userinfo)}
        <p class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
          <span class="text2">你的年度<span class="text1">关键词</span>是</span>
          <span class="text3">{$userinfo.topic.keyword}</span>
        </p>
        <p class="text text4 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.7s">
          {$userinfo.topic.desc}</p>
        {/if}
        <div class="box ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.9s"
             style="height: 45vh">
          <div class="text5">2024年好运指南，你比较关注：</div>
          <div class="btn btn1" id="btn3-1" data-type="1"></div>
          <div class="btn btn2" id="btn3-2" data-type="2"></div>
          <div class="btn btn3" id="btn3-3" data-type="3"></div>
          <div class="btn btn4" id="btn3-4" data-type="4"></div>
          <div class="avatar" style="background-image: url({$userinfo.avatar})"></div>
          <div class="img"></div>
        </div>
        <div class="btn-tip ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
          <div class="tip-img"></div>
          <div class="text">点击对应按钮查看</div>
        </div>
      </div>
    </div>
    <div class="con-background swiper-slide p4">
      <div class="content-item content-1" style="display: block">
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s"><span
                class="text2">2024年感情指南：</span>
        </div>
        <div class="text ani" style="padding-top: 2vh;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s"
             swiper-animate-delay="0.5s"><span class="text6">原来你就是纯爱战士</span></div>
        <div class="box ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.7s">
          <div class="text7" style="padding-top: 2vh;">2024年8月29日，<span class="text8">金星入天秤座</span></div>
          <div class="text7">你会更在意和谐与平衡</div>
          <div class="text7">和心仪的人关系升温</div>
          <div class="text7">但如果你们曾经有一些未解决的问题</div>
          <div class="text7">也可能会爆发出来</div>
          <div class="text7">建议多一点耐心和对方沟通</div>
          <div class="text7">换位思考</div>
          <div class="img img4-1"></div>
        </div>
      </div>
      <div class="content-item content-2" style="display: none">
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s"><span
                class="text2">2024年财富指南：</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s"
             style="padding-top: 1rem;"><span class="text6">钱来钱来，钱从四面八方来</span></div>
        <div class="box ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.7s">
          <div class="text7">2024年1月27日，<span class="text8">天王星在金牛座顺行</span></div>
          <div class="text7">你可能会有较多的财源机会</div>
          <div class="text7">但可能也会因意外而流失财富</div>
          <div class="text7" style="padding-top: 1.5rem;">4月29日，<span class="text8">金星进入金牛座</span></div>
          <div class="text7">你对财富的渴望会愈发明显</div>
          <div class="text7">收入可能翻倍，还会去找寻一些新的赚钱方式</div>
          <div class="text7">总之，越努力越幸运</div>
          <div class="img img4-2"></div>
        </div>
      </div>
      <div class="content-item content-3" style="display: none">
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s"><span
                class="text2">2024年事业指南：</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s"
             style="padding-top: 1rem;"><span class="text6">爆改自己，争当职场之王</span></div>
        <div class="box ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.7s">
          <div class="text7" style="padding-top: 1rem;">2024年1月21日，<span class="text8">冥王星进入水瓶座</span></div>
          <div class="text7">众多行业会面临着转行等</div>
          <div class="text7">你也可能会有更换赛道的想法</div>
          <div class="text7">或者是事业中出现了重大变革</div>
          <div class="text7" style="padding-top: 1rem;">5月26日，<span class="text8">木星进入双子座</span></div>
          <div class="text7">你可能会涌现出许多新的想法</div>
          <div class="text7">获得了比以往更多的机会</div>
          <div class="text7">不过要注意分辨部分信息的真伪</div>
          <div class="img img4-3"></div>
        </div>
      </div>
      <div class="content-item content-4" style="display: none">
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s"><span
                class="text2">2024年健康指南：</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s"
             style="padding-top: 1rem;"><span class="text6">养生-更适合中国宝宝的体质</span></div>
        <div class="box ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.7s">
          <div class="text7" style="padding-top: 1rem;">2024年1月21日，<span class="text8">冥王星进入水瓶座
</span></div>
          <div class="text7">尤为注意流行性疾病，如感冒和发烧、过敏等</div>
          <div class="text7">可能会有一些小众或意想不到的疾病爆发</div>
          <div class="text7">这也提醒你，本年需要注重养生。</div>
          <div class="text7" style="padding-top: 1rem;">11月4日，<span class="text8">火星进狮子座
</span></div>
          <div class="text7">可能一些平时不注意的问题会在此时显现出来</div>
          <div class="text7">要早日调节好自己的身体状态</div>
          <div class="text7">你也会开始注重健康</div>
          <div class="text7">如通过锻炼、按摩等方式改善身体</div>
          <div class="img img4-4"></div>
        </div>
      </div>
    </div>
    <div class="con-background swiper-slide p5">
      <div class="content-item">
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s"><span
                class="text1">2024好运提前知</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.4s"><span
                class="text2">3月20日-4月1日，太阳进入白羊座</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><span
                class="text3">这段时间，人们活力四射,</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.6s"><span
                class="text3">一切都是新迹象,</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.7s"><span
                class="text3">可能会有好的转机出现~</span>
        </div>
        <div class="img-1 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.2s" swiper-animate-delay="1.5s"></div>
        <div class="img-2 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.2s" swiper-animate-delay="1.5s"></div>
      </div>
    </div>
    <div class="con-background swiper-slide p6">
      <div class="content-item">
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s"><span
                class="text2">7月6日，巨蟹座新月</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.4s"><span
                class="text3">这是一个非常特殊的日子，</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><span
                class="text3">也是一年中旬的关键点，</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.6s"><span
                class="text3">愿望都容易心想事成，</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.7s"><span
                class="text3">是</span><span
                class="text4" style="color: #FF6696;">爱情</span><span class="text4" style="color: #0092FF;">工作</span><span class="text4"
                                                                                                                          style="color: #00B9B3;">学业</span><span
                class="text3">丰收的时间</span></div>
        <div class="img-1 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.2s" swiper-animate-delay="1.7s"></div>
      </div>
    </div>
    <div class="con-background swiper-slide p7">
      <div class="content-item">
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s"><span
                class="text2">8月29日-9月23日</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s"><span
                class="text2">金星停留在天秤座</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.4s"><span
                class="text3">生活和谐，财富平稳，</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><span
                class="text3">是一个适合治愈、疗养自己、玩乐的时间，</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.6s"><span
                class="text3">先去好好享受生活，</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.7s"><span
                class="text3">你才能更好的成长~</span>
        </div>
        <div class="img-1 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.2s" swiper-animate-delay="1.7s"></div>
      </div>
    </div>
    <div class="con-background swiper-slide p8 swiper-no-swiping">
      <div class="content-item">
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s"><span
                class="text3">本年</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.4s"><span
                class="text3">你会经历</span><span
                class="text2">3</span><span class="text3">次水逆，分别在：</span></div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><span
                class="text2">4月2日、8月5日、11月26日</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.6s"><span
                class="text3">水星逆行可能会带来出行遇堵车，</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.7s"><span
                class="text3">分手后怀念旧人等…</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.8s"><span
                class="text3">不同方面的影响，</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.9s"><span
                class="text3">建议放松心态，以平常心对待水逆~</span>
        </div>
        <div id="btn-8" class="btn ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1.3s"></div>
        <div class="btn-tip ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="2s">点击按钮水逆退散～</div>
      </div>
    </div>
    <div class="con-background swiper-slide p9 swiper-no-swiping">
      <div class="content-item">
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s"><span
                class="text3">本年</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.4s"><span
                class="text3">你会经历</span><span
                class="text2">12</span><span class="text3">次新月</span></div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><span
                class="text3">新月是非常适合</span><span
                class="text2">许愿</span><span class="text3">的日子</span></div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.6s"><span
                class="text3">这天来和小准准一起许愿</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.7s"><span
                class="text3">相信你的愿望</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.8s"><span
                class="text2">一定可以实现</span>
        </div>
        <div id="btn-9" class="btn ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1.3s"></div>
        <div class="btn-tip ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="2s">点击按钮心想事成～</div>
      </div>
    </div>
    <div class="con-background swiper-slide p10 swiper-no-swiping">
      <div class="content-item">
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s"><span
                class="text1">2024年，也是充满挑战和机遇的一年</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.4s"><span
                class="text1">我们或许会收获很多惊喜</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><span
                class="text1">也会遇到挫折和困难</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.6s"><span
                class="text1">不论怎样，只管努力</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.7s"><span
                class="text1">一定会有一张满意的答卷</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.8s"><span
                class="text2">让我们一起点燃烟花</span>
        </div>
        <div class="text ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.9s"><span
                class="text2">既是告别过去，也是迎接未来～</span>
        </div>
        <div class="btn-area ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="1s">
          <div class="btn-tip">点击爆竹即可点燃烟花</div>
          <div class="img-1" draggable="true"></div>
          <div class="img-2"></div>
          <div class="img-3"></div>
          <div class="img-3-2"></div>
          <div class="img-4" id="lottie"></div>
        </div>
        <div class="img-5">
          <div id="canvas">
            <div class="coupon">
              <div class="coupon-img"></div>
              <div class="coupon-name">{if isset($userinfo['coupon_name']) && $userinfo.coupon_name}{$userinfo.coupon_name}{/if}</div>
            </div>
            <canvas id="scratch">滑动此区域刮奖</canvas>
          </div>
        </div>
        <div id="btn-10" onclick="commonJsToNative('local', 'discount_coupon_center?need_auth=2');"></div>
      </div>
    </div>
    {/if}
  </div>
  <div class="slide-box">
    <div class="slide-img"></div>
    <p>上下滑动进行翻页</p>
  </div>
  <div class="share-box" style="display: none">
    <div class="share-box-shadow"></div>
    <div class="share-choice">
      <div class="title">分享到：</div>
      <div class="share-list">
        <div class="list-item" onclick="toShare(0);">
          <span class="share0"></span>微信好友
        </div>
        <div class="list-item" onclick="toShare(1)">
          <span class="share1"></span>朋友圈
        </div>
        <div class="list-item" onclick="toShare(3);">
          <span class="share3"></span>QQ好友
        </div>
        <div class="list-item" onclick="toShare(4);">
          <span class="share4"></span>QQ空间
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="__STATIC__/common.js"></script>
<script type="text/javascript" src="https://oss.goddessxzns.com/static/live/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://oss.goddessxzns.com/active/year_report/2023/lib/swiper-bundle.min.js"></script>
<script type="text/javascript" src="https://oss.goddessxzns.com/active/year_report/2023/lib/swiper.animate1.0.3.min.js"></script>
<script type="text/javascript" src="https://oss.goddessxzns.com/static/live/js/lottie.min.js"></script>
<script type="text/javascript" src="https://oss.goddessxzns.com/active/seven/js/EventUtil.js"></script>
<script>
    appType = '{$app_type}';
</script>
<script>
    window.sto = null;
    window.isUserPaused = false;
    resizeWindow();
    var mySwiper = new Swiper('.swiper-container', {
        initialSlide: 0,
        direction: 'vertical',
        freeMode: false, // 关闭滑动自由模式，一次只能滑动一整页
        watchSlidesVisibility: true,
        preloadImages: true,
        runCallbacksOnInit: true,
        autoplay: false,
        loop: false,
        lazyLoading: true,
        lazyLoadingInPrevNext: true,
        lazyLoadingInPrevNextAmount: 3,
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        on: {
            resize: function () {
                console.log('resize')
                resizeWindow();
            },
            init: function (swiper) {
                console.log('init')
                swiperAnimate(swiper);
            },
            // slideChangeTransitionEnd: function (swiper) {
            slideChange: function (swiper) {
                console.log('slideChange')
                console.log('swiper.activeIndex:', swiper.activeIndex)
                if (swiper.activeIndex === 3 || swiper.activeIndex === 4 || swiper.activeIndex === 5 || swiper.activeIndex === 6) {
                    $('.slide-box').show();
                } else {
                    $('.slide-box').hide();
                }
                swiperAnimate(swiper);
                if (swiper.activeIndex > 0) {
                    $('.p' + (swiper.activeIndex + 1) + ' .ani').removeClass('ani');
                }
            },
        }
    })

    $('.music-box').click(function () {
        var musicDom = document.getElementById('bg-music');
        console.log('musicDom.paused:', musicDom.paused);
        if (musicDom.paused) {
            window.isUserPaused = false;
            musicDom.play();
            $(this).css({
                animationPlayState: 'running',
                backgroundImage: 'url(https://oss.goddessxzns.com/active/year_report/2023/img/music-1.png)'
            });
        } else {
            window.isUserPaused = true;
            musicDom.pause();
            $(this).css({
                animationPlayState: 'paused',
                backgroundImage: 'url(https://oss.goddessxzns.com/active/year_report/2023/img/music-0.png)'
            });
        }
    })

    $('#share_btn').click(function () {
        $('.share-box').show();
    })

    $('.share-box-shadow').click(function () {
        $('.share-box').hide();
    })

    $('.checkbox-xieyi').click(function () {
        if ($(this).data('status') === 0) {
            $(this).css({backgroundImage: 'url(https://oss.goddessxzns.com/active/year_report/2023/img/check-1.png)'}).data('status', 1)
            $(this).parent().siblings('.open-year-report-btn').attr({src: 'https://oss.goddessxzns.com/active/year_report/2023/img/open-btn-1.png'})
        } else {
            $(this).css({backgroundImage: 'url(https://oss.goddessxzns.com/active/year_report/2023/img/check-0.png'}).data('status', 0)
            $(this).parent().siblings('.open-year-report-btn').attr({src: 'https://oss.goddessxzns.com/active/year_report/2023/img/open-btn-0.png'})
        }
    })

    $('#btn1').click(function () {
        clearTimeout(sto);
        if ($('.checkbox-xieyi').eq(0).data('status') === 0) {
            $('.toast').show();
            sto = setTimeout(function () {
                $('.toast').hide();
            }, 2000)
        } else {
            mySwiper.slideNext();
        }
    })

    $('#btn2').click(function () {
        $(this).remove();
        // 开启动画，动画时长2s
        $('.p2 .img2').css({animationPlayState: 'running'});
        // 2秒后进入下一页，加载中
        setTimeout(function () {
            $('.p2 .content-item').hide().siblings('.loading').show();
            $('.p2 .loading .flag,.p2 .loading .percent').css({animationPlayState: 'running'})

            setTimeout(function () {
                // 下一页
                mySwiper.slideNext();
            }, 4200)
        }, 1800)
    })

    $('.p3 .btn').click(function () {
        var type = $(this).data('type')
        $('.p4 .content-' + type).show().siblings('.content-item').hide();
        mySwiper.slideNext();
    })

    $('.p8 .btn').click(function () {
        $(this).css('visibility', '').attr('class', 'btn');
        $(this).fadeOut(1500, 'swing', function () {
            mySwiper.slideTo(8, 1000)
            // 预加载动画图片，避免切换图片时页面闪烁
            var img = new Image();
            img.src = 'https://oss.goddessxzns.com/active/year_report/2023/img/p10-img-3.gif';
        })
    })

    $('.p9 .btn').click(function () {
        $(this).css({backgroundImage: 'url(https://oss.goddessxzns.com/active/year_report/2023/img/p9-img-1.gif)'})
        $(this).css('visibility', '').attr('class', 'btn');
        $(this).fadeOut(1700, 'swing', function () {
            mySwiper.slideTo(9, 1000)
        })
    })

    $('.p10 .img-3, .p10 .img-1, .p10 .img-2, .p10 .btn-tip').click(function () {
        var rem = $('.p10').width() / 100 * 4.267;
        $('.p10 .img-2, .p10 .btn-tip').hide();
        var endRight = 5 * rem;
        var endBottom = 7.19 * rem;

        $.ajax({
            url: '/api/v41/year_active_2023/get_coupon',
            type: 'GET',
            dataType: 'json',
            data: {},
            headers: {$headers},
            success: function (res) {
                // console.log('res:', res)
                if (res.code == 200) {
                    $('.p10 .img-5 .coupon-name').text(res.data['coupon_name']);
                } else {
                    console.log('error:', res.msg);
                }
            }
        })
        // 预加载动画图片，避免切换图片时页面闪烁
        var img = new Image();
        img.src = 'https://oss.goddessxzns.com/active/year_report/2023/img/p10-img-3.gif';

        $('.p10 .img-1').animate({'right': endRight, 'bottom': endBottom}, {
            duration: 1000,
            queue: false,// 必须设置为false，否则一直调用回调函数
            complete: function () {
                $('.p10 .img-1').hide();
                $('.p10 .img-3').hide();
                $('.p10 .img-3-2').show();
                // 延迟后开始放烟花
                setTimeout(function () {
                    $('.p10 .text').fadeOut()
                    $('.p10 .img-3-2').hide();
                    $('.p10 .img-4').show();
                    var lottieGift = lottie.loadAnimation({
                        container: document.getElementById('lottie'),
                        renderer: 'svg',
                        loop: false,
                        autoplay: false,
                        path: 'https://oss.goddessxzns.com/active/year_report/2023/img/data123.json',
                    });
                    // 动画数据加载完成时，开始播放
                    lottieGift.addEventListener('data_ready', () => {
                        lottieGift.play();
                        // 播放动画的过程中，预载入刮奖窗口背景图
                        var img = new Image();
                        img.src = 'https://oss.goddessxzns.com/active/year_report/2023/img/p10-img-5.png';
                    });
                    // loop: false 关闭循环播放时，监听播放完成
                    lottieGift.onComplete = () => {
                        lottieGift.destroy();
                        $('#lottie').remove();
                        // 弹出刮奖窗口
                        $('.p10 .img-5').show();

                        //刮刮乐区域的宽高
                        var scratchDom = document.getElementById("scratch");
                        var canvasDom = document.getElementById("canvas");
                        var width = canvasDom.offsetWidth - 6;
                        var height = canvasDom.offsetHeight - 6;
                        // console.log(width, height);
                        var device = /android|iphone|ipad|ipod|webos|iemobile|opear mini|linux/i.test(navigator.userAgent.toLowerCase());
                        var startEvtName = device ? "touchstart" : "mousedown";
                        var moveEvtName = device ? "touchmove" : "mousemove";
                        var endEvtName = device ? "touchend" : "mouseup";

                        //定义画布的大小
                        scratchDom.height = height;
                        scratchDom.width = width;
                        var ctx = scratchDom.getContext("2d");

                        var boxTop = $('#canvas').offset().top;//canvas的top值
                        var boxLeft = $('#canvas').offset().left;//canvas的left值
                        console.log('boxTop:', boxTop, 'boxLeft:', boxLeft);

                        ctx.fillStyle = "#f0e1cd";
                        ctx.fillRect(0, 0, width, height);
                        //设置文字样式
                        ctx.font = "14px Arial";
                        ctx.textAlign = "center";
                        ctx.fillStyle = "#D4C4AE";
                        //设置文字位置
                        var x = width / 2;
                        var y = height / 2 + 7;
                        //设置文字内容
                        var text = '滑动此区域刮奖';
                        //在画布上绘制文本
                        ctx.fillText(text, x, y);

                        /* 根据手指移动画线，使之变透明*/
                        function draw(event) {
                            var x = device ? event.touches[0].clientX : event.clientX;
                            var y = device ? event.touches[0].clientY : event.clientY;
                            // console.log(x, y);
                            ctx.beginPath();
                            ctx.globalCompositeOperation = "destination-out";
                            var newX = x - boxLeft;
                            var newY = y - boxTop;
                            ctx.arc(newX, newY, 10, 0, Math.PI * 2, false);
                            ctx.fill();
                            ctx.closePath();
                        }

                        /* 增长触摸监听*/
                        //true  捕获 false  冒泡
                        scratchDom.addEventListener(startEvtName, function () {
                            console.log("touch1");
                            scratchDom.addEventListener(moveEvtName, draw, false);
                        }, false);

                        scratchDom.addEventListener(endEvtName, function () {
                            console.log("touch2");
                            scratchDom.removeEventListener(moveEvtName, draw, false);
                        }, false);
                        document.addEventListener(endEvtName, function () {
                            /* 获取imageData对象*/
                            var imageDate = ctx.getImageData(0, 0, scratchDom.width, scratchDom.height);
                            /* */
                            var allPX = imageDate.width * imageDate.height;

                            var iNum = 0;//记录刮开的像素点个数

                            for (var i = 0; i < allPX; i++) {
                                if (imageDate.data[i * 4 + 3] == 0) {
                                    iNum++;
                                }
                            }
                            if (iNum >= allPX * 0.25) {
                                scratchDom.style.display = "none";
                                $('.p10 #btn-10').show();
                            }
                        }, false);
                    };
                }, 1600)
            }
        })
    })

    makeTipListHmtl();

    function resizeWindow() {
        if ($(window).width() >= 750) {
            $('html').css({'font-size': '32px'});
        } else {
            $('html').css({'font-size': '4.267vw'});
        }
    }

    function makeTipListHmtl() {
        var tipList = [
            '春花灿烂桃花开', '事业顺风顺水', '出门遇喜事儿', '天降横财',
            '人际关系洗牌期', '天降大任', '家有喜事', '感情冲刺期'
        ];
        // var width = $('.p1 .content-item').width();
        // var maxLeft = Math.floor(width / 2);
        var tipShowDom = $('.list .list-show').eq(0);
        var tipListItem = '';
        $.each(tipList, function (k, v) {
            tipListItem += '<div class="list-item"><div class="text">' + v + '</div></div>';
            // var left = Math.random() * maxLeft;
            // tipListItem += '<div class="list-item"><div class="text" style="margin-left: ' + left + 'px;">' + v + '</div></div>';
        })
        tipShowDom.html(tipListItem);
    }

    // 页面关闭 先停止音乐播放
    window.onclose = function () {
        document.getElementById('bg-music').pause();
        $('.music-box').css({
            animationPlayState: 'paused',
            backgroundImage: 'url(https://oss.goddessxzns.com/active/year_report/2023/img/music-0.png)'
        });
    }
    // 监听页面被切换至后台/手机熄屏
    document.addEventListener('visibilitychange', function () {
        if (document.hidden) {
            document.getElementById('bg-music').pause();
            $('.music-box').css({
                animationPlayState: 'paused',
                backgroundImage: 'url(https://oss.goddessxzns.com/active/year_report/2023/img/music-0.png)'
            });
        } else {
            if (window.isUserPaused === false) {
                document.getElementById('bg-music').play();
                $('.music-box').css({
                    animationPlayState: 'running',
                    backgroundImage: 'url(https://oss.goddessxzns.com/active/year_report/2023/img/music-1.png)'
                });
            }
        }
    })
    toShare = function (shareIndex) {
        commonJsToNativeShare('{$shareTitle}', '{$descript}', '{$domain}/webactive/active_year_report/report2023?zhunleshare=1', shareIndex)
    }

</script>
{if empty($userinfo)}
<script>
    new JMLink({
        jmlink: 'https://s0ue2y.jmlk.co/AA63',// 短链地址
        button: document.querySelector('#download'),
        plhparams: {
            target: 'link',
            link: '{$domain}/webactive/active_year_report/report2023?zhunleshare=1'
        }
    });
</script>
{/if}
</body>
</html>
